<!-- 
	This is the dashboard page, it uses the dashboard layout in: 
	"./layouts/Dashboard.vue" .
 -->

<template>
	<div class="animate__animated animate__fadeIn">

    <Banner></Banner>
		<!-- Counter Widgets -->
		<a-row :gutter="24">
			<a-col :span="24" :lg="12" :xl="12" class="mb-24" v-for="(stat, index) in stats" :key="index">
				<!-- Widget 1 Card -->
				<WidgetCounter
					:title="stat.title"
					:value="stat.value"
					:prefix="stat.prefix"
					:suffix="stat.suffix"
					:icon="stat.icon"
					:status="stat.status"
				></WidgetCounter>
				<!-- / Widget 1 Card -->
			</a-col>
		</a-row>
		<!-- / Counter Widgets -->

		<!-- Charts -->
		<a-row :gutter="24"  >

      <a-col :span="24" :lg="10" class="mb-24">
        <a-card :bordered="false" class="widget-1">
          <div class="echart" id="e-chart" style="height: 300px; width: 100%;"></div>
        </a-card>
      </a-col>
      <a-col :span="24" :lg="14" class="mb-24">
        <a-card :bordered="false" class="widget-1">
          <div class="echart" id="line-chart" style="height: 300px; width: 100%;"></div>
        </a-card>
      </a-col>
		</a-row>

    <a-row :gutter="24" >
      <a-col :span="24" :lg="24" :xl="24" class="mb-24" >
        <CardInfoTable
            :data="caseInfoList"
            :columns="tableColumns">
        </CardInfoTable>
      </a-col>

    </a-row>


		<!-- / Charts -->


		<!-- / Cards -->

	</div>
</template>

<script>

	// Bar chart for "Active Users" card.
	import CardBarChart from '../components/Cards/CardBarChart' ;

	// Line chart for "Sales Overview" card.
	import CardLineChart from '../components/Cards/CardLineChart' ;

	// Counter Widgets
	import WidgetCounter from '../components/Widgets/WidgetCounter' ;

	// "Projects" table component.
	import CardProjectTable from '../components/Cards/CardProjectTable' ;

	// Order History card component.
	import CardOrderHistory from '../components/Cards/CardOrderHistory' ;

	// Information card 1.
	import CardInfo from '../components/Cards/CardInfo' ;

	// Information card 2.
	import CardInfo2 from '../components/Cards/CardInfo2' ;


  import CardInfoTable from "@/components/Cards/CardInfoTable";

  import Banner from "@/components/Banner";

	// Counter Widgets stats
	const stats = [

		{
			title: "平台注册用户",
			value: 560,
			suffix: "+20%",
			icon: `
						<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M9 6C9 7.65685 7.65685 9 6 9C4.34315 9 3 7.65685 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6Z" fill="#111827"/>
							<path d="M17 6C17 7.65685 15.6569 9 14 9C12.3431 9 11 7.65685 11 6C11 4.34315 12.3431 3 14 3C15.6569 3 17 4.34315 17 6Z" fill="#111827"/>
							<path d="M12.9291 17C12.9758 16.6734 13 16.3395 13 16C13 14.3648 12.4393 12.8606 11.4998 11.6691C12.2352 11.2435 13.0892 11 14 11C16.7614 11 19 13.2386 19 16V17H12.9291Z" fill="#111827"/>
							<path d="M6 11C8.76142 11 11 13.2386 11 16V17H1V16C1 13.2386 3.23858 11 6 11Z" fill="#111827"/>
						</svg>`,
		},
		{
			title: "新增诈骗信息",
			value: 200,
			prefix: "+",
			status: "danger",
			suffix: "-20%",
			icon: `
						<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M3.17157 5.17157C4.73367 3.60948 7.26633 3.60948 8.82843 5.17157L10 6.34315L11.1716 5.17157C12.7337 3.60948 15.2663 3.60948 16.8284 5.17157C18.3905 6.73367 18.3905 9.26633 16.8284 10.8284L10 17.6569L3.17157 10.8284C1.60948 9.26633 1.60948 6.73367 3.17157 5.17157Z" fill="#111827"/>
						</svg>`,
		},

	] ;

	// "Projects" table list of columns and their properties.
	const tableColumns = [
		{
			title: '用户',
			dataIndex: 'user',
			scopedSlots: { customRender: 'user' },
			width: 300,
		},
		{
			title: '信息',
			dataIndex: 'reportInfo',
			scopedSlots: { customRender: 'reportInfo' },
		},
    {
      title: '认证状态',
      dataIndex: 'veri',
      scopedSlots: {customRender: 'veri'}
    },
    {
      title: '案例种类',
      dataIndex: 'type',
      scopedSlots: {customRender: 'type'}
    }

	];

	// "Projects" table list of rows and their properties.
	const tableData = [
		{
			key: '1',
			user: {
				name: 'WeiHao.L',
        avatar: 'images/face-6.jpeg',
        email: '2569982966@qq.com'
			},
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '账号交易'
		},

    {
      key: '2',
      user: {
        name: 'Sky',
        avatar: 'images/face-2.jpg',
        email: '251@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: false,
      type: '账号交易'
    },

    {
      key: '3',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-1.jpg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '4',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-3.jpg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '5',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-4.jpg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '游戏代练'
    },
	];


	export default ({
		components: {
			CardBarChart,
			CardLineChart,
			WidgetCounter,
			CardProjectTable,
			CardOrderHistory,
			CardInfo,
			CardInfo2,
      CardInfoTable,
      Banner
		},
		data() {
			return {

				// Associating table data with its corresponding property.
				tableData,

				// Associating table columns with its corresponding property.
				tableColumns,
        caseInfoList: null,
				// Counter Widgets Stats
        stats : [

          {
            title: "平台注册用户",
            value: 0,
            suffix: "0",
            icon: `
						<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M9 6C9 7.65685 7.65685 9 6 9C4.34315 9 3 7.65685 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6Z" fill="#111827"/>
							<path d="M17 6C17 7.65685 15.6569 9 14 9C12.3431 9 11 7.65685 11 6C11 4.34315 12.3431 3 14 3C15.6569 3 17 4.34315 17 6Z" fill="#111827"/>
							<path d="M12.9291 17C12.9758 16.6734 13 16.3395 13 16C13 14.3648 12.4393 12.8606 11.4998 11.6691C12.2352 11.2435 13.0892 11 14 11C16.7614 11 19 13.2386 19 16V17H12.9291Z" fill="#111827"/>
							<path d="M6 11C8.76142 11 11 13.2386 11 16V17H1V16C1 13.2386 3.23858 11 6 11Z" fill="#111827"/>
						</svg>`,
          },
          {
            title: "新增诈骗信息",
            value: 0,
            prefix: "+",
            status: "danger",
            suffix: "0",
            icon: `
						<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M3.17157 5.17157C4.73367 3.60948 7.26633 3.60948 8.82843 5.17157L10 6.34315L11.1716 5.17157C12.7337 3.60948 15.2663 3.60948 16.8284 5.17157C18.3905 6.73367 18.3905 9.26633 16.8284 10.8284L10 17.6569L3.17157 10.8284C1.60948 9.26633 1.60948 6.73367 3.17157 5.17157Z" fill="#111827"/>
						</svg>`,
          },

        ] ,
			}
		},
    methods:{
		  initChart(){
        let getPiechart = this.$echarts.init(document.getElementById('e-chart'));
        let getLineChart = this.$echarts.init(document.getElementById('line-chart'));
        var pieOption = {
          title: {
            text: '现存案例分类',
            left: 'center',
            top: 'center'
          },
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: 335,
                  name: '账号交易类'
                },
                {
                  value: 234,
                  name: '游戏代练类'
                },
                {
                  value: 1548,
                  name: '交流诈骗类'
                }
              ],
              radius: ['40%', '70%']
            }
          ]
        };
        var lineOption = {
          legend:{
            orient:'horizontal',
            right: 'center',
            top: 'bottom'
          },
          xAxis: {
            data: ['3.3', '3.4', '3.5', '3.6', '3.7']
          },
          yAxis: {},
          series: [
            {
              name: '用户注册数量',
              data: [10, 22, 28, 43, 49],
              type: 'line',
              stack: 'x'
            },
            {
              name: '用户反馈数量',
              data: [5, 4, 3, 5, 10],
              type: 'line',
              stack: 'x'
            }
          ]
        };
        getPiechart.setOption(pieOption);
        getLineChart.setOption(lineOption);
        // 随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          getPiechart.resize();
          getLineChart.resize();
        });
      },
      openPage(path) {
        this.$router.push({
          path: path
        })
      },
      getPlatformData(){
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          url: "/api/platform/getPlatformInfo", //后端请求的路径
          method: "post",

        }).then((response) => {
          console.log(response.data)
          if (response.data.status == 0) {
            var registerNumOld = response.data.data.registerNumOld
            var registerNumNew = response.data.data.registerNumNew
            var caseNumOld = response.data.data.caseNumOld
            var caseNumNew = response.data.data.caseNumNew
            var registerRate = (registerNumNew / registerNumOld)*100 + "%"
            var caseRate = (caseNumNew/caseNumOld)*100+ "%"
            this.stats[0].value = registerNumNew
            this.stats[0].suffix = registerRate

            this.stats[1].value = caseNumNew
            this.stats[1].suffix = caseRate
          }
        });
      },
      getCaseData(){
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          url: "/api/case/getAllCase", //后端请求的路径
          method: "get",

        }).then((response) => {
          // console.log(response.data)
          if (response.data.status == 0) {
           // 循环遍历
            var preList = response.data.data
            for (let i = 0; i < preList.length; i++) {
              
            }
            this.caseInfoList = response.data.data
            console.log(this.caseInfoList)
          }
        });
      },
      getCaseDataFinish(){

        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          url: "/api/case/getAllCaseFinish", //后端请求的路径
          method: "get",

        }).then((response) => {
          // console.log(response.data)
          if (response.data.status == 0) {
            // 循环遍历
            var preList = response.data.data
            for (let i = 0; i < preList.length; i++) {

            }
            this.caseInfoList = response.data.data
            console.log(this.caseInfoList)
          }
        });
      },
      getCaseDataNoFinish(){
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          url: "/api/case/getAllCaseNoFinish", //后端请求的路径
          method: "get",

        }).then((response) => {

          if (response.data.status == 0) {
            // 循环遍历
            var preList = response.data.data
            for (let i = 0; i < preList.length; i++) {

            }
            this.caseInfoList = response.data.data
            console.log(this.caseInfoList)
          }
        });
      }


    },
    mounted() {
		  this.initChart()
      this.getPlatformData()
      this.getCaseDataFinish()
    }
  })

</script>

<style lang="scss">
</style>